<script setup>

import {useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import axios from "axios";
const shopList=ref([]);
const router=useRouter();
let currentPage=ref(1);
let total=ref(0);
let pageSize=ref(9)
const pagedShopList = computed(() => {
  // console.log(shopList.value)
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  let list=shopList.value.slice(startIndex, endIndex);
  // console.log(list)
  return list
});


onMounted(()=>{
  getAllShop();
})

async function getAllShop() {
  const response = await axios.get("/shop/getall")
  console.log(response)
  shopList.value = response.data;
  total.value=response.data.length
}

function handleCurrentChange(newPage){
  // console.log(newPage)
  currentPage.value=newPage
}
function gotoBusinessInfo(shop){
  console.log(shop)
  router.push({
    path: '/index/businessInfo',
    query: { shopId: shop.id, shopName:shop.shopName }
  });
}
</script>

<template>
<el-row style="margin-top: 5px">
  <el-col v-for="shop in pagedShopList" :key="shop.id" :span="8"
          >
    <div  class="text item">
      <el-card :body-style="{ padding: '0px' }" class="card" @click="gotoBusinessInfo(shop)">
        <img
            src="../../assets/img/img.png"
            class="image"
        />
        <div style="padding: 14px">
          <span>{{shop.shopName}}</span>
<!--          <div class="bottom">-->

<!--            <el-button text class="button">Operating</el-button>-->
<!--          </div>-->
        </div>
      </el-card>

    </div>
  </el-col>
</el-row>
  <div class="example-pagination-block">

    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"

        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

.card{
  width: 100%;
}
.card .image{
  width: 100px;
  height: 100px;
}


.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  margin-right: 5px;
}



.example-pagination-block{
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>